<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>用户其他对账</span>
          </div>
        </div>
        <div class="mainor_form marginTop15">
          <div class="mainor_te" v-if="is_default != 1">
            <el-button @click="deleteBatch">批量删除</el-button>
            <el-button @click="changeUserDia">选择用户</el-button>
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="区域" prop="region_id">
              <el-select
                v-model.trim="form.region_id"
                placeholder="区域"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(region, index) in region"
                  :key="index"
                  :label="region"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分组" prop="group_id">
              <el-select
                v-model.trim="form.group_id"
                placeholder="区域"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(group, index) in group"
                  :key="index"
                  :label="group"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户" prop="uid">
              <change-user-input
                ref="changeUserInput_form"
                @sendValue="getUser($event, 1)"
                @clear="clearUid($event, 2)"
              ></change-user-input>
            </el-form-item>

            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset(1)"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList(1)"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            @selection-change="handleSelectionChange($event, 1)"
          >
            <el-table-column width="80" type="selection" />
            <el-table-column
              label="用户名称"
              prop="nickname"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              label="编码"
              align="center"
              show-overflow-tooltip
              min-width="120"
              ><template slot-scope="scope">
                {{ scope.row.info ? scope.row.info.code : "" }}
              </template>
            </el-table-column>
            <el-table-column
              label="联系人"
              align="center"
              prop="name"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.address ? scope.row.address.name : "" }}
              </template></el-table-column
            >
            <el-table-column
              label="手机"
              align="center"
              prop="mobile"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              label="区域"
              align="center"
              prop="market_price"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ region[scope.row.info.region_id] }}
              </template></el-table-column
            >
            <el-table-column
              label="分组"
              align="center"
              prop="points_one"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ group[scope.row.info.group_id] }}
              </template></el-table-column
            >
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="220"
              v-if="is_default != 1"
            >
              <template slot-scope="scope">
                <el-link type="danger" @click="handleDel(scope)">删除</el-link>
                <el-link
                  type="warning"
                  v-repeatClick
                  @click="export_send_models(scope.row.id)"
                  >导出模板</el-link
                ></template
              ></el-table-column
            >
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit($event, 1)"
              @current-change="changePage($event, 1)"
            />
          </div>
        </div>
      </div>

      <!-- 选择用户 -->
      <el-dialog
        title="选择用户"
        class="main_dialog dialog1000"
        :visible.sync="addDiaVisible"
        @closed="addDiaClose"
      >
        <div class="mainor_form">
          <el-form
            :inline="true"
            :model="grant_form"
            class="demo-form-inline"
            ref="diaRefForm"
            label-width="70px"
            style="width: 100%"
          >
            <el-form-item label="" prop="region_id">
              <el-select
                v-model.trim="grant_form.region_id"
                placeholder="区域"
                class="wid220"
              >
                <el-option label="所有区域" value=""></el-option>
                <el-option
                  v-for="(region, index) in region"
                  :key="index"
                  :label="region"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="group_id">
              <el-select
                v-model.trim="grant_form.group_id"
                placeholder="分组"
                class="wid220"
              >
                <el-option label="所有分组" value=""></el-option>
                <el-option
                  v-for="(group, index) in group"
                  :key="index"
                  :label="group"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="uid">
              <change-user-input
                ref="changeUserInput_dialog"
                @sendValue="getUser($event, 2)"
                @clear="clearUid($event, 2)"
              ></change-user-input>
            </el-form-item>

            <el-form-item>
              <el-button class="reset marginLeft10" @click="reset(2)"
                >重置</el-button
              >
              <el-button
                type="primary"
                :loading="dia_listLoading"
                @click="getArticleList(2)"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div
          class="main_table"
          style="height: 400px; overflow: auto"
          v-loading="dia_listLoading"
        >
          <el-table
            ref="multipleTable"
            :data="user_list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            :header-cell-class-name="this.$verticaline"
            @selection-change="handleSelectionChange($event, 2)"
          >
            <el-table-column width="80" type="selection" />
            <el-table-column
              label="用户名称"
              align="center"
              prop="nickname"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              label="编码"
              align="center"
              prop="goods_name"
              show-overflow-tooltip
              min-width="120"
              ><template slot-scope="scope">
                {{ scope.row.info ? scope.row.info.code : "" }}
              </template>
            </el-table-column>
            <el-table-column
              label="区域"
              align="center"
              prop="goods_name"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.info ? region[scope.row.info.region_id] : "" }}
              </template>
            </el-table-column>
            <el-table-column
              label="分组"
              align="center"
              prop="goods_name"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.info ? group[scope.row.info.group_id] : "" }}
              </template></el-table-column
            >
            <el-table-column
              label="管理操作"
              align="center"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                <el-link type="danger" @click="handleBind(scope)">选择</el-link>
              </template></el-table-column
            >
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="grant_current.page"
              :page-sizes="[10, 15, 20, 100]"
              :page-size="grant_limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="grant_totalCount"
              background
              @size-change="changeLimit($event, 2)"
              @current-change="changePage($event, 2)"
            />
          </div>
        </div>

        <div slot="footer">
          <el-button class="marginLeft10" @click="addDiaVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="handleBatchBind"
            :disabled="batchAllBtn"
            >批量选择</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  get_empty_members,
  get_empty_membersnot,
  bind_user,
  batch_bind_user,
  unbind_user,
  batch_unbind_user,
  export_send_models,
} from "@/api/financial/finaicalOther";
import dateOption from "@/options/dateOption";
import { parseTime, exportMethod, getNowMonth } from "@/utils/index";

export default {
  data() {
    return {
      // 时间
      parseTime,
      exportMethod,
      getNowMonth,
      id: "",
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: [],
      group: {},
      region: {},
      createTime: [],
      pickerOptions: dateOption,
      listLoading: false,
      // 搜索
      form: {
        uid: "",
        id: "",
        region_id: "",
        group_id: "",
      },
      total: {
        num: 0,
        points: 0,
        value: 0,
      },
      typeList: [],
      exportbuVisible: false,
      // 全选
      selectArr: [],
      grant_selectArr: [],
      // 弹窗
      addDiaVisible: false,
      grant_form: {
        uid: "",
        region_id: "",
        group_id: "",
      },
      grant_current: {
        page: 1,
        per_page: 10,
      },
      grant_limit: 10,
      grant_totalCount: 1,
      user_list: [],
      dia_listLoading: false,

      // 默认模板
      is_default: "",
    };
  },
  computed: {
    batchAllBtn() {
      if (this.grant_selectArr.length == 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.get_empty_members();
  },
  methods: {
    //获取用户信息
    getUser(data, type) {
      let uid = data.info.user_id;
      switch (type) {
        case 1:
          this.form.uid = uid;
          this.get_empty_members();
          break;
        case 2:
          this.grant_form.uid = uid;
          break;
      }
    },
    // 清除用户的uid
    clearUid(data, type) {
      switch (type) {
        case 1:
          this.form.uid = "";
          break;
        case 2:
          this.grant_form.uid = "";
          break;
      }
    },

    // 搜索
    getArticleList(type) {
      switch (type) {
        case 1:
          this.current.page = 1;
          this.get_empty_members();
          break;
        case 2:
          this.grant_current.page = 1;
          this.get_empty_membersnot();
          break;
      }
    },
    reset(type) {
      switch (type) {
        case 1:
          this.$refs["userListFrom"].resetFields();
          if (this.$refs["changeUserInput_form"]) {
            this.$refs["changeUserInput_form"].name = "";
          }
          this.get_empty_members();
          break;
        case 2:
          this.$refs["diaRefForm"].resetFields();
          if (this.$refs["changeUserInput_dialog"]) {
            this.$refs["changeUserInput_dialog"].name = "";
          }
          this.get_empty_membersnot();
          break;
      }
    },
    // 分页
    changeLimit(pageSize, type) {
      switch (type) {
        case 1:
          this.current.per_page = pageSize;
          this.get_empty_members();
          break;

        case 2:
          this.grant_current.per_page = pageSize;
          this.get_empty_membersnot();
          break;
      }
    },
    changePage(page, type) {
      switch (type) {
        case 1:
          this.current.page = page;
          this.get_empty_members();
          break;

        case 2:
          this.grant_current.page = page;
          this.get_empty_membersnot();
          break;
      }
    },
    // 列表
    get_empty_members() {
      this.listLoading = true;
      let data = Object.assign(this.list_form(), this.current);
      get_empty_members(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data.list.data;
          this.totalCount = res.data.list.total;
          this.group = res.data.group;
          this.region = res.data.region;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      return form;
    },
    // 选择分组
    changeUserDia() {
      this.get_empty_membersnot();
      this.addDiaVisible = true;
    },
    // 未选择的用户分组
    get_empty_membersnot() {
      this.dia_listLoading = true;
      let data = Object.assign(this.grant_current, this.grant_form);
      get_empty_membersnot(data).then((res) => {
        if (res.errcode == 0) {
          this.user_list = res.data.list.data;
          this.grant_totalCount = res.data.list.total;
          this.group = res.data.group;
          this.region = res.data.region;
          this.dia_listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 监听全选
    handleSelectionChange(val, type) {
      switch (type) {
        case 1:
          this.selectArr = [];
          val.map((item) => {
            this.selectArr.push(item.id);
          });
          break;
        case 2:
          this.grant_selectArr = [];
          val.map((item) => {
            this.grant_selectArr.push(item.id);
          });
          break;
      }
    },
    // 批量删除
    deleteBatch() {
      let length = this.selectArr.length;
      if (length > 0) {
        let msg = `你已经选择【${length}】个用户，是否删除？`;
        this.$confirm(msg, "提示", {
          confirmButtonText: "确定",
          type: "warning",
        })
          .then(() => {
            let uids = this.selectArr.join(",");
            let data = {
              uids: uids,
            };

            batch_unbind_user(data).then((res) => {
              if (res.errcode == 0) {
                this.$message.success("删除成功");
                this.get_empty_members();
              } else {
                this.$message.error(res.errmsg);
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择用户");
      }
    },
    // 批量选择按钮
    handleBatchBind() {
      let uids = this.grant_selectArr.join(",");
      let form = {
        uids: uids,
      };
      this.batchAlltype1(form);
    },
    // 批量选择---传uids
    batchAlltype1(form) {
      let data = Object.assign(form);
      batch_bind_user(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("批量选择成功");
          this.addDiaVisible = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    // 单个选择
    handleBind(scope) {
      let index = scope.$index;
      let row = scope.row;
      let data = {
        uid: row.id,
      };
      bind_user(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("选择成功");
          this.user_list.splice(index, 1);
          this.grant_totalCount--;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 关闭弹窗
    addDiaClose() {
      this.grant_form.uid = "";
      this.grant_form.region_id = "";
      this.grant_form.group_id = "";
      this.grant_current.page = 1;
      this.grant_current.per_page = 10;
      this.user_list = [];
      this.grant_selectArr = [];

      this.get_empty_members();
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        switch (index) {
          case 0:
            sums[index] = "合计";
            break;
          case 6:
            sums[index] = this.$toFixed(this.total.num);
            break;
          case 7:
            sums[index] = this.$toFixed(this.total.points);
            break;
          case 9:
            sums[index] = this.$toFixed(this.total.value);
            break;
        }
      });
      return sums;
    },
    // 删除
    handleDel(scope) {
      this.$confirm("是否将该用户从当前列表中删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = scope.row.id;
          let data = {
            uid: id,
          };
          unbind_user(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("删除成功");
              this.get_empty_members();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },

    // 导出模板
    export_send_models(id) {
      let data = { uid: id };
      export_send_models(data).then((res) => {
        this.exportMethod(res, "配送模板");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 120px);
  }
}
// 导出订单表头
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px;
}
.company_name {
  padding-top: 15px;
}
.maintip {
  text-align: center;
  padding-top: 15px;
  font-size: 18px;
  span {
    display: inline;
    padding: 18px 0;
    color: red;
  }
}
.new_navbar_svg {
  vertical-align: top;
  margin-left: 5px;
  use {
    fill: #ffffff;
  }
}
.status0 {
  color: red;
}
.status1 {
  color: #118ab2;
}
.status2 {
  color: #03a98e;
}
/deep/.el-dialog__body {
  padding-bottom: 0;
}
</style>
